<template>
    <view class="DataSelect">
        <view class="ckBox" @click="show">
            <u-input v-if="!onlyPicker" :value="name" style="pointer-events: none" :placeholder="placeholder" :disabled="disabled" :suffixIcon="disabled?'':'arrow-right'" suffixIconStyle="font-size: 22px;color: #909399" readonly> </u-input>
        </view>
        <u-picker :show="isShow" :columns="columns" @confirm="onConfirm" @cancel="hide" :keyName="label" @close="hide" :closeOnClickOverlay="true" :defaultIndex="defaultIndex"></u-picker>
    </view>
</template>

<script>
export default {
    name: "DataSelect",
    data() {
        return {
            columns: [],
            defaultIndex: [0],
            isShow: false,
        };
    },

    props: {
        //双向绑定的的id、name、obj
        id: [Number, Array, String],
        name: [Array, String],
        obj: null,

        //表名
        table: {
            type: String,
        },

        //下拉列表显示名称
        label: {
            type: String,
            default: "name",
        },

        //下拉列表选择的值
        value: {
            type: String,
            default: "autoID",
        },

        //提示信息
        placeholder: {
            type: String,
            default: "请选择",
        },

        //接口方法名
        action: {
            type: String,
            default: "GetSearchWithIsDelete",
        },

        //接口方法是否为函数方法
        actionIsFunc: {
            type: Boolean,
            default: true,
        },

        //搜索条件
        filter: {
            type: Object,
            default() {
                return {};
            },
        },

        //是否异步请求数据
        async: {
            type: Boolean,
            default: true,
        },

        //是否只显示Picker，如果为true，则需要通过父组件其它事件来触发显示或隐藏
        onlyPicker: {
            type: Boolean,
            default: false,
        },
        isHasClear: {
            type: Boolean,
            default: true,
        },
        //在组件加载时是否加载数据
        isLoadingData: {
            type: Boolean,
            default: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    created() {
        this.selectID = this.id;

        if (this.isLoadingData == true) {
            this.initList();
        }
    },
    watch: {
        id: {
            handler(newVal, oldVal) {
                this.setDefaultSelect(newVal);
            },
            immediate: true, //首次加载时就要执行
        },
    },
    methods: {
        //初始化列表数据
        initList(type) {
            //通过属性来判断api的对象是函数还是非函数
            let api;
            if (this.actionIsFunc) {
                api = this.$app.api[this.table][this.action]();
            } else {
                api = this.$app.api[this.table][this.action];
            }

            //调用接口拿数据
            this.$app.CallApi(api, {
                data: this.filter,
                async: this.async,
                success: (res) => {
					
					// if(['UsingWirerope','Stock'].indexOf(this.table)>-1&&['GetSearchs','GetSearch'].indexOf(this.action)>-1){
					// 	this.label='newCode';
					// 	res.map((m)=>{
					// 		m.newCode=m.code+'|'+m.name;
					// 	});
					// }
					
                    if (this.isHasClear) {
                        res.unshift({});
                    }
                    this.columns = [res];
                    this.setDefaultSelect(this.id);
                },
            });
        },

        //显示选择框
        show(_idx = 0) {
            if (this.disabled) return;
            this.isShow = true;
			this.$emit("onShow");
        },

        //隐藏选择框
        hide() {
            this.isShow = false;
			this.$emit("onClose");
        },

        //设置默认选中，参数id指的是数据id，即与this.id表示同一个意思
        setDefaultSelect(id) {
            if (!this.$gx.IsEmpty(id) && !this.$gx.IsEmpty(this.columns) && !this.$gx.IsEmpty(this.columns[0])) {
                var _idx = this.columns[0].findIndex((x) => {
                    return x[this.value] == id;
                });

                if (_idx != -1) {
                    this.$set(this.defaultIndex, "0", _idx);
                }
            }
        },

        //确认
        onConfirm(obj) {
            if (obj == null || obj.value == null) {
                this.$emit("update:id", null);
                this.$emit("update:name", null);
                this.$emit("update:obj", null);
            } else {
                let selectObj = obj.value[0];
                this.$emit("update:id", selectObj[this.value]);
                this.$emit("update:name", selectObj[this.label]);
                this.$emit("update:obj", selectObj);
            }

            this.hide();

            //向外抛出一个事件，可在父组件中用来处理change事件
            this.$emit("onChange");
        },

        //清空当前选项
        clearData() {
            this.$emit("update:id", null);
            this.$emit("update:name", null);
            this.$emit("update:obj", null);
            this.$emit("onChange");
        },

        //清空选项列表
        clearList() {
            this.columns = [];
        },

        //设置下拉列表的值
        setList(arr) {
            this.columns = [Gx.DeepCopy(arr)];
        },
    },
};
</script>

<style scoped>
.DataSelect {
    width: 100%;
}

.ckBox {
}
</style>
